<template>
  <div style="width: 95vw">
    <div>
      <van-search
        v-model="value"
        shape="round"
        input-align="center"
        background="#bbb"
        placeholder="检索品牌"
      />
    </div>
    <div style="display: flex">
      <div style="width: 20vw">
        <van-sidebar v-model="active">
          <van-sidebar-item
            v-for="item in data.title"
            :title="item.titles"
            style="height: 3vh; font-size: 12px; line-height: 0.5vh"
            @click="change"
          />
        </van-sidebar>
      </div>
      <div style="width: 80vw">
        <van-grid :column-num="3" icon-size="61.5">
          <van-grid-item
            v-for="value in datas"
            :key="value"
            :icon="value.cove_url"
            style="height: 14vh"
          />
        </van-grid>
      </div>
    </div>
    <div>
      <van-index-bar>
        <van-index-anchor v-for="item in data.sy" :index="item" style="text-align: left;" />

        <!-- </van-index-anchor> -->
              <!-- <van-cell :title="value" v-for="value in data.sy" /> -->
      </van-index-bar>
    </div>
    <!-- <div v-for="item in data.sy">{{item.d}}
      <div v-for="value in item.oder">{{value}}</div>
    </div> -->

  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const active = ref(0);
const datas = ref();
const data = reactive({
  title: [
    {
      id: 1,
      titles: "护肤美妆",
    },
    {
      id: 2,
      titles: "母婴儿童",
    },
    {
      id: 3,
      titles: "户外运动",
    },
    {
      id: 4,
      titles: "男士时尚",
    },
    {
      id: 5,
      titles: "女士时尚",
    },
    {
      id: 6,
      titles: "鞋靴箱包",
    },
    {
      id: 7,
      titles: "服饰配饰",
    },
  ],
  pp: [
    {
      id: 1,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l1.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l1.png"),
        },
      ],
    },
    {
      id: 2,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l2.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l2.png"),
        },
      ],
    },
    {
      id: 3,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l3.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l3.png"),
        },
      ],
    },
    {
      id: 4,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l4.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l4.png"),
        },
      ],
    },
    {
      id: 5,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l5.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l5.png"),
        },
      ],
    },
    {
      id: 6,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l6.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l6.png"),
        },
      ],
    },
    {
      id: 7,
      url: [
        {
          id: 1,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 2,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 3,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 4,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 5,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 6,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 7,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 8,
          cove_url: require("@/assets/img/login/l7.png"),
        },
        {
          id: 9,
          cove_url: require("@/assets/img/login/l7.png"),
        },
      ],
    },
  ],
  sy:[ '#',
        'asda',
        'asdad',
        'asdfasf',
        'aefea',
        'asfea',
        'asfe',
        'afea',
        'asdfe',
        'bsda',
        'bsdad',
        'bsdfasf',
        'befea',
        'bsfea',
        'bsfe',
        'bfea',
        'bsdfe',
        'csda',
        'casdad',
        'casdfasf',
        'caefea',
        'casfea',
        'casfe',
        'cafea',
        'casdfe',
        'dasda',
        'dasdad',
        'dasdfasf',
        'daefea',
        'dasfea',
        'dasfe',
        'dafea',
        'dasdfe',
        'easda',
        'easdad',
        'easdfasf',
        'eaefea',
        'easfea',
        'easfe',
        'eafea',
        'easdfe',
        'fasda',
        'fasdad',
        'fasdfasf',
        'faefea',
        'fasfea',
        'fasfe',
        'fafea',
        'fasdfe'
  ]
});
datas.value = data.pp[0].url;
const change = () => {
  setTimeout(() => {
    datas.value = "";
    datas.value = data.pp[active.value].url;
    console.log(datas.value);
  }, 10);
};
</script>
<style lang="scss"></style>
